import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Center(
        child: Text("基础组件"),
      )),
      body: MyHomeContent(),
      floatingActionButton: FloatingActionButton(
        onPressed: () => print("FloatingActionButton"),
        child: Icon(Icons.star),
      ),
    );
  }
}

class MyHomeContent extends StatefulWidget {
  @override
  State<MyHomeContent> createState() => _MyHomeContentState();
}

class _MyHomeContentState extends State<MyHomeContent> {
  var divider = Column(
    children: [
      Divider(
        height: 1.0,
        thickness: 1,
        color: Colors.grey,
      ),
      SizedBox(
        height: 10,
      )
    ],
  );

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        TextDemo(),
        divider,
        ButtonDemo(),
        divider,
        IconDemo(),
        divider,
        TextFieldDemo(),
        divider,
        ImgDemo()
      ],
    );
  }
}

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text(
          "Text Text Text",
          style: TextStyle(
            fontSize: 20,
            color: Colors.red,
            fontWeight: FontWeight.bold,
            wordSpacing: 20,
          ),
        ),
        Text(
          "少年侠气，交结五都雄。肝胆洞，毛发耸。立谈中，死生同。一诺千金重。",
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            fontSize: 20,
            color: Colors.red,
            fontWeight: FontWeight.bold,
            wordSpacing: 20,
          ),
        ),
        Text.rich(TextSpan(style: TextStyle(fontSize: 20), children: [
          TextSpan(text: "富文本", style: TextStyle(color: Colors.green)),
          WidgetSpan(child: Icon(Icons.face)),
          WidgetSpan(
              child: Icon(
            Icons.favorite,
            color: Colors.red,
          ))
        ]))
      ],
    );
  }
}

class ButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        ElevatedButton(
            style: ElevatedButton.styleFrom(
                primary: Colors.orange,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20))),
            onPressed: () => print("ElevatedButton"),
            child: Text("ElevatedButton")),
        TextButton(
          onPressed: () => print("TextButton"),
          child: Text("TextButton"),
        ),
        OutlinedButton(
          onPressed: () => print("OutlinedButton"),
          child: Text("OutlinedButton"),
        ),
        IconButton(
          onPressed: () => print("IconButton"),
          icon: Icon(Icons.backup_outlined),
        ),
      ],
    );
  }
}

class IconDemo extends StatelessWidget {
  const IconDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: const [
        Icon(
          Icons.pets,
          size: 30,
          color: Colors.blue,
        ),
        Icon(
          IconData(0xc91d, fontFamily: "MaterialIcons"),
          size: 30,
          color: Colors.deepPurple,
        )
      ],
    );
  }
}

class ImgDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image(
            image: NetworkImage(
                "https://flutter.cn/docs/assets/images/dash/Dashatars.png")),
        Image.network(
            "https://flutter.cn/docs/assets/images/dash/dash-fainting.gif"),
        Image(
          height: 100,
          image: AssetImage("assets/images/mao.jpg"),
        ),
        Image.asset(
          "assets/images/mao.jpg",
          width: 150,
        )
      ],
    );
  }
}

class TextFieldDemo extends StatefulWidget {
  @override
  State<TextFieldDemo> createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State<TextFieldDemo> {
  var usernameCtrl = TextEditingController();
  var passwordCtrl = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const TextField(),
        TextField(
          controller: usernameCtrl,
          decoration: const InputDecoration(
            labelText: "用户名",
            icon: Icon(Icons.person),
            hintText: "点进去的时候就变成了这个",
            border: OutlineInputBorder(),
          ),
          onChanged: (value) => print("onChange $value"),
          onSubmitted: (value) => print("onSubmitted $value"),
        ),
        TextField(
            controller: passwordCtrl,
            decoration:
                InputDecoration(labelText: "密码", icon: Icon(Icons.lock)),
            obscureText: true),
        Container(
            height: 50,
            width: 200,
            child: TextButton(
                style: TextButton.styleFrom(
                    primary: Colors.white, backgroundColor: Colors.blue),
                onPressed: () {
                  var name = usernameCtrl.text;
                  var pwd = passwordCtrl.text;
                  print("用户名：$name 密码：$pwd");
                },
                child: Text("登录")))
      ],
    );
  }
}
